﻿@{
    Layout = null;
    ViewData["Title"] = "select";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<div id="add">
    <el-form v-if="tiem1">
        <div id="headDiv">
            <el-button type="primary" round=round size="mini" v-on:click="select()">查询</el-button>
        </div>
        <span class="demonstration">请选择员工所在I/II/III级机构</span>
        <el-cascader expand-trigger="hover"
                     :options="parentCateList"
                     :props="cascaderProps"
                     v-model="selectedKeys"
                     v-on:change="parentCateChanged"
                     clearable
                     change-on-select
                     ref="casc"
                     size="mini">
            @*el-cascader使用clearable，完全清空，删除旧项*@
            @*change-on-select下拉菜单选择*@
        </el-cascader>
        <span class="demonstration">新职分类/名称</span>
        <el-cascader expand-trigger="hover"
                     :options="parentCateList1"
                     :props="cascaderProps1"
                     v-model="selectedKeys1"
                     v-on:change="parentCateChanged1"
                     clearable
                     change-on-select
                     ref="casc1"
                     size="mini">
            @*el-cascader使用clearable，完全清空，删除旧项*@
            @*change-on-select下拉菜单选择*@
        </el-cascader>

        <div class="block">
            <span class="demonstration">请输入建档时间</span>
            <el-date-picker v-model="value2"
                            type="daterange"
                            align="right"
                            v-on:change="lll"
                            unlink-panels
                            clearable
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
            </el-date-picker>
        </div>
    </el-form>
    <el-form v-if="tiem2">
        <el-button type="primary" round=round size="mini" v-on:click="fanhu1()">返回</el-button>
        <el-table :data="tableData"
                  :border="true" style="width: 100%">
            <el-table-column prop="new_first_kind_name"
                             label="I级机构"
                             width="180">
            </el-table-column>
            <el-table-column prop="new_second_kind_name"
                             label="II级机构"
                             width="180">
            </el-table-column>
            <el-table-column prop="new_third_kind_name"
                             label="III机构"
                             width="180">
            </el-table-column>
            <el-table-column prop="new_salary_standard_name"
                             label="薪酬标准"
                             width="180">
            </el-table-column>
            <el-table-column prop="human_name"
                             label="名字"
                             width="180">
            </el-table-column>
            <el-table-column label="查看">
                <template slot-scope="scope">
                    <el-button size="mini"
                               v-on:click="handleEdit(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-form>

    <el-form ref="form" :model="form" label-width="110px" v-if="tiem3">
        <el-button type="primary" round=round size="mini" v-on:click="fanhu2()">返回</el-button>
        @*第一行*@
        <el-row>
            <el-col :span="5">
                <el-form-item label="档案编号" size="mini">
                    <el-input v-model="form.human_id" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="姓名" size="mini">
                    <el-input v-model="form.human_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第二行*@
        <el-row>
            <el-col :span="5">
                <el-form-item label="原一级机构" size="mini">
                    <el-input v-model="form.first_kind_id" :disabled="true" v-if="false"></el-input>
                    <el-input v-model="form.first_kind_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="原二级机构" size="mini">
                    <el-input v-model="form.second_kind_id" :disabled="true" v-if="false"></el-input>
                    <el-input v-model="form.second_kind_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="原三级机构" size="mini">
                    <el-input v-model="form.third_kind_id" :disabled="true" v-if="false"></el-input>
                    <el-input v-model="form.third_kind_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第三行*@
        <el-row>
            <el-col :span="5">
                <el-form-item label=" 原职位分类 " size="mini">
                    <el-input v-model="form.major_kind_id" :disabled="true" v-if="false"></el-input>
                    <el-input v-model="form.major_kind_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="原职位名称" size="mini">
                    <el-input v-model="form.major_id" :disabled="true" v-if="false"></el-input>
                    <el-input v-model="form.major_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="原薪酬标准" size="mini">
                    <el-input v-model="form.salary_standard_id" :disabled="true" v-if="false"></el-input>
                    <el-input v-model="form.salary_standard_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="原薪酬总额" size="mini">
                    <el-input v-model="form.salary_sum" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第四行*@
        <el-row>
            <el-row>
                <el-col :span="5">
                    <el-form-item label="新一级机构" size="mini">
                        <el-input v-model="form.new_first_kind_name" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="新二级机构" size="mini">
                        <el-input v-model="form.new_second_kind_name" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="新三级机构" size="mini">
                        <el-input v-model="form.new_third_kind_name" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-row>
        @*第五行*@
        <el-row>
            <el-col :span="5">
                <el-form-item label=" 新职位分类 " size="mini">
                    <el-input v-model="form.new_major_kind_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="新职位名称" size="mini">
                    <el-input v-model="form.new_major_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="新薪酬标准" size="mini">
                    <el-input v-model="form.new_salary_standard_name" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="新薪酬总额" size="mini">
                    <el-input v-model="form.new_salary_sum" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第六行*@
        <el-row>
            <el-col :span="5">
                <el-form-item label="登记人" size="mini">
                    <el-input v-model="form.register" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="登记时间" size="mini">
                    <el-input v-model="form.regist_time" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="复核人" size="mini">
                    <el-input v-model="form.checker" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="复核时间" size="mini">
                    <el-input v-model="form.check_time" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第七行*@
        <el-row>
            <el-col :span="20">
                <el-form-item label="调动原因" size="mini">
                    <el-input type="textarea" :rows="5" v-model="form.change_reason" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</div>


<script type="text/javascript">
    new Vue({
        el: "#add",
        data: {
            tableData: [],
            new_first_kind_name: "",
            new_second_kind_name: "",
            new_third_kind_name: "",
            new_salary_standard_name: "",
            human_name: "",
            tiem1: true,
            tiem2: false,
            tiem3: false,
            form: {
                //档案编号
                human_id: "",
                //姓名
                human_name: "",
                //原一/二/三级机构名称
                first_kind_name: "",
                second_kind_name: "",
                third_kind_name: "",
                //原职位分类/职位名称/薪酬标准名称
                major_kind_name: "",
                major_name: "",
                salary_standard_name: "",
                //原薪酬总额
                salary_sum: "",
                //新一/二/三级机构名称
                new_first_kind_name: "",
                new_second_kind_name: "",
                new_third_kind_name: "",
                //新职位分类/职位名称/薪酬标准名称
                new_major_kind_name: "",
                new_major_name: "",
                new_salary_standard_name: "",
                //新薪酬总额
                new_salary_sum: "",
                //登记人/复核人
                register: "",
                checker: "",
                //登记时间/复核时间
                regist_time: "",
                check_time: "",
                //调动原因/审核通过意见
                change_reason: "",
            },
            //新一/二/三级机构
            cascaderProps: {
                value: "id",
                label: "name",
                children: "children",
            },
            //新职位分类/名称
            cascaderProps1: {
                value: "id",
                label: "name",
                children: "children",
            },
            selectedKeys: [],
            selectedKeys1: [],
            parentCateList: [],
            parentCateList1: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value2: [],
        },
        methods: { 
             lll(val) {
                if (val == null) {
                    this.value2 = [];
                }
                console.info("值改变事件：",val);
            },
            select() {
                if (this.selectedKeys == ''  && this.selectedKeys1 == '') {
                    axios.get('/Major_change/Select1').then(res => {
                        this.tableData = res.data;
                        this.tiem1 = false;
                        this.tiem2 = true;
                    })
                } else {
                    axios.post('/Major_change/Select', {
                        yiji: this.zhi[0],
                        erji: this.zhi[1],
                        sanji: this.zhi[2],
                        shijianKS: this.value2[0],
                        shijianJS: this.value2[1],
                        zhiwei1: this.zhi1[0],
                        zhiwei2: this.zhi1[1],
                    }).then(res => {
                        this.tableData = res.data;
                        this.tiem1 = false;
                        this.tiem2 = true;
                    })
                }
            },
            sele() {
                axios.get('/Major_change/Third1')
                    .then(res => {
                        console.info(res.data);
                        this.parentCateList = res.data;
                    });
                axios.get('/Major_change/Third2')
                    .then(res => {
                        console.info(res.data);
                        this.parentCateList1 = res.data;
                    });
            },
            parentCateChanged: function (val) {
                if (this.selectedKeys.length > 0) {
                    this.key = this.selectedKeys;
                    this.zhi = this.$refs["casc"].getCheckedNodes()[0].pathLabels;
                }
            },
            parentCateChanged1: function (val) {
                if (this.selectedKeys1.length > 0) {
                    this.key1 = this.selectedKeys1;
                    this.zhi1 = this.$refs["casc1"].getCheckedNodes()[0].pathLabels;
                }
            },
            handleEdit(row) {
                this.tiem2 = false;
                this.tiem3 = true;
                //档案编号
                this.form.human_id = row.human_id;
                //姓名
                this.form.human_name = row.human_name;
                //原一/二/三机构名称
                this.form.first_kind_name = row.first_kind_name;
                this.form.second_kind_name = row.second_kind_name;
                this.form.third_kind_name = row.third_kind_name;
                //原职位分类/职位名称/薪酬标准名称
                this.form.major_kind_name = row.major_kind_name;
                this.form.major_name = row.major_name;
                this.form.salary_standard_name = row.salary_standard_name;
                //原薪酬总额
                this.form.salary_sum = row.salary_sum;
                //新一/二/三机构名称
                this.form.new_first_kind_name = row.new_first_kind_name;
                this.form.new_second_kind_name = row.new_second_kind_name;
                this.form.new_third_kind_name = row.new_third_kind_name;
                //新职位分类/职位名称/薪酬标准名称
                this.form.new_major_kind_name = row.new_major_kind_name;
                this.form.new_major_name = row.new_major_name;
                this.form.new_salary_standard_name = row.new_salary_standard_name;
                //新薪酬总额
                this.form.new_salary_sum = row.new_salary_sum;
                //登记人/登记时间
                this.form.register = row.register;
                this.form.regist_time = row.regist_time;
                //复核人/复核时间
                this.form.checker = row.checker;
                this.form.check_time = row.check_time;
                //调动原因
                this.form.change_reason = row.change_reason;
            },
            fanhu1() {
                this.tiem1 = true;
                this.tiem2 = false;
            },
            fanhu2() {
                this.tiem2= true;
                this.tiem3= false;
            },
        },
        mounted() {
            this.sele();
        },
    })
</script>

